<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!--product start-->
<article class="product_article" id = "sortType1">
    <nav id="product_nav">
        <ul class="section_list clearfix">
            <li class="activeTab" data-category="">
                <a href="#" title="About Product 탭 메뉴 활성화">
                    <div>
                        <img src="/resources/image/product/product_section_list00.png" alt="탭 버튼 이미지 1번">
                        <span>ABOUT PRODUCT</span>
                    </div>
                </a>
            </li>
            <li data-category="C00">
                <a href="#" title="Interactive Theater System 탭 메뉴 활성화">
                    <div>
                        <img src="/resources/image/product/product_section_list01.png" alt="탭 버튼 이미지 2번">
                        <span>Interactive Theater System</span>
                    </div>
                </a>
            </li>
            <li data-category="C01">
                <a href="#" title="TRANSLOOK 탭 메뉴 활성화">
                    <div>
                        <img src="/resources/image/product/product_section_list02.png" alt="탭 버튼 이미지 3번">
                        <span>TRANSLOOK</span>
                    </div>
                </a>
            </li>
            <li data-category="C02">
                <a href="#" title="Digital Signage 탭 메뉴 활성화">
                    <div>
                        <img src="/resources/image/product/product_section_list03.png" alt="탭 버튼 이미지 4번">
                        <span>Digital Signage</span>
                    </div>
                </a>
            </li>
            <li data-category="C03">
                <a href="#" title="Media Table 탭 메뉴 활성화">
                    <div>
                        <img src="/resources/image/product/product_section_list04.png" alt="탭 버튼 이미지 5번">
                        <span>Media Table</span>
                    </div>
                </a>
            </li>
            <li data-category="C04">
                <a href="#" title="Media Art 탭 메뉴 활성화">
                    <div>
                        <img src="/resources/image/product/product_section_list05.png" alt="탭 버튼 이미지 6번">
                        <span>Media Art</span>
                    </div>
                </a>
            </li>
            <li data-category="C05">
                <a href="#" title="Solutions 탭 메뉴 활성화">
                    <div>
                        <img src="/resources/image/product/product_section_list06.png" alt="탭 버튼 이미지 6번">
                        <span>Solutions</span>
                    </div>
                </a>
            </li>
        </ul>
        <ul class="section_control clearfix">
            <li><a href="#" title="이전 탭 선택하기" class="action_prev"><img src="/resources/image/product/listBtn_prev.png" alt="이전 탭 선택 이미지"></a></li>
            <li><a href="#" title="다음 탭 선택하기" class="action_next"><img src="/resources/image/product/listBtn_next.png" alt="다음 탭 선택 이미지"></a></li>
            <li><a href="#" title="정렬 방식 변경하기" class="action_sort type1"><img src="/resources/image/product/listBtn_sort.png" alt="정렬 방식 변경 이미지"></a></li>
        </ul>
    </nav>
    <div class="tabContents clearfix">
        <div class="tabContent tab0 activeTab">
            <div class="tab_title">
                <div class="viewmovie">
                    <img src="/resources/image/product/proN_0_size0.png" alt="Why we make things ">
                </div>
            </div>
            <section class="tabSection1"><img src="/resources/image/product/proN_0_size0_1.jpg" alt=""></section>
            <section class="tabSection2"><img src="/resources/image/product/proN_0_size0_2.jpg" alt="사람들이 진정으로 갈망하는 것은 물질 자체가 아니다. 의미가 담긴 물질이다.  -제임스 트위첼, 서비스와 제품의 융합, 우리는 디지털 환경의 중심에 살고 있습니다.  컨텐츠 • 소프트웨어 서비스가 하드웨어와 적극적으로 융합되어 고객에게 이전에 없던 가치를 지속적으로 창출하는 시대입니다. 바이널아이만의 독특한 제품들은 고객의 브랜드에 접목되어 이전에 없던 경험을 제공했고, 이 과정에서 바이널아이는 시장을 선도해왔습니다. Next를 준비하는 바이널아이에게 제품이란, 서비스와의 접점에서 창조될 때야 비로소 의미를 갖습니다. 우리는 꾸준한 R&am;D로써 가치를 담은 새로운 산물들을 선보였습니다. 우리는 이를 ‘Servicizing Product’라고 명명합니다. "></section>
            <section class="tabSection3"><img src="/resources/image/product/proN_0_size0_3.jpg" alt="Servicizing, 고객의 사용자 경험을 통한 디자인, 경험에서 비롯된 디맨드를 먼저 발견하고 제품의 서비스화를 실현합니다. ,Emotional Technology, 아트와 휴머니티에 중점을 둔 기술, 기술이 만드는 새로운 가능성과 공통의 인간경험에 기반한 감성소통의 융합을 꿈꿉니다., Exclusive Value, 기술의 융합을 통한 차별화된 솔루션, 지속적인 R&amp;D를 수행해 새로운 UI/UX와 미디어환경을 선도합니다."></section>
        </div>
        <div class="tabContent tab1">
            <div class="tab_title">
                <div class="information clearfix">
                    <div class="titleImg">
                        Interactive Theater System
                    </div>
                </div>
                <div class="viewmovie">
                    <img src="/resources/image/product/proN_1_size0_copy.png" alt="세계 최초 인터랙티브 극장 시스템">
                    <br/>
                    <a href="#" title="참고영상보기"><img src="/resources/image/product/btn_movie.png" alt="참고영상 보기 버튼"></a>
                </div>
            </div>
            <section class="tabSection1"><img src="/resources/image/product/proN_1_size0_1.jpg" alt=""></section>
            <section class="tabSection2"><img src="/resources/image/product/proN_1_size0_2.jpg" alt=""></section>
            <section class="tabSection3"><img src="/resources/image/product/proN_1_size0_3.jpg" alt=""></section>
        </div>
        <div class="tabContent tab2">
            <div class="tab_title">
                <div class="information clearfix">
                    <div class="titleImg">
                        <img src="/resources/image/product/proN_2_size0_title.png" alt="TRANSLOOK">
                    </div>
                    <div class="visitsite">
                        <a href="http://translook.info/" target="_blank" title="트렌스룩 사이트 방문"><img src="/resources/image/product/btn_link2.png" alt="트렌스룩 사이트 보기"></a>
                    </div>
                    <div class="awards">
                        <img src="/resources/image/product/proN_2_size0_award.png" alt="어워드">
                    </div>
                </div>
                <div class="viewmovie">
                    <img src="/resources/image/product/proN_2_size0_copy.png" alt="세계 최초 인터랙티브 투명디스플레이 쇼케이스">
                    <br/>
                    <a href="#" title="참고영상보기"><img src="/resources/image/product/btn_movie.png" alt="참고영상 보기 버튼"></a>
                </div>
            </div>
            <section class="tabSection1"><img src="/resources/image/product/proN_2_size0_1.jpg" alt=""></section>
            <section class="tabSection2"><img src="/resources/image/product/proN_2_size0_2.jpg" alt=""></section>
            <section class="tabSection3"><img src="/resources/image/product/proN_2_size0_3.jpg" alt=""></section>
        </div>
        <div class="tabContent tab3">
            <div class="tab_title">
                <div class="information clearfix">
                    <div class="titleImg">Digital Signage</div>
                    <div class="awards">
                        <img src="/resources/image/product/proN_3_size0_award.png" alt="어워드">
                    </div>
                </div>
                <div class="viewmovie">
                    <img src="/resources/image/product/proN_3_size0_copy.png" alt="기술과 조형, 사용자 경험의 혁신적인 만남">
                </div>
            </div>
            <section class="tabSection1"><img src="/resources/image/product/proN_3_size0_1.jpg" alt=""></section>
            <section class="tabSection2"><img src="/resources/image/product/proN_3_size0_2.jpg" alt=""></section>
            <section class="tabSection3"><img src="/resources/image/product/proN_3_size0_3.jpg" alt=""></section>
        </div>
        <div class="tabContent tab4">
            <div class="tab_title">
                <div class="information clearfix">
                    <div class="titleImg">
                        <!-- <img src="/resources/image/product/proN_4_size0_title.png" alt="Media Table">--> 
                        Media Table
                    </div>
                    <div class="awards"><img src="/resources/image/product/proN_4_size0_award.png" alt="어워드"></div>
                </div>
                <div class="viewmovie">
                    <img src="/resources/image/product/proN_4_size0_copy.png" alt="정보를 보고 느끼는 방식 자체의 진화">
                    <br/>
                    <a href="#" title="참고영상보기"><img src="/resources/image/product/btn_movie.png" alt="참고영상 보기 버튼"></a>
                </div>
            </div>
            <section class="tabSection1"><img src="/resources/image/product/proN_4_size0_1.jpg" alt=""></section>
            <section class="tabSection2"><img src="/resources/image/product/proN_4_size0_2.jpg" alt=""></section>
        </div>
        <div class="tabContent tab5">
            <div class="tab_title">
                <div class="information clearfix">
                    <div class="titleImg">Media Art</div>
                </div>
                <div class="viewmovie">
                    <img src="/resources/image/product/proN_5_size0_copy.png" alt="감성과 기술의 접점">
                    <br/>
                    <a href="#" title="참고영상보기">
                        <img src="/resources/image/product/btn_movie.png" alt="참고영상 보기 버튼">
                    </a>
                </div>
            </div>
            <section class="tabSection1"><img src="/resources/image/product/proN_5_size0_1.jpg" alt=""></section>
            <section class="tabSection2"><img src="/resources/image/product/proN_5_size0_2.jpg" alt=""></section>
        </div>
        <div class="tabContent tab6">
            <div class="tab_title">
                <div class="information clearfix">
                    <div class="titleImg">
                        Solutions
                    </div>
                </div>
                <div class="viewmovie">
                    <img src="/resources/image/product/proN_6_size0_copy.png" alt="빠르고 효율적인 미디어 운영">
                    <br/>
                    <!-- <a href="#" title="참고영상보기"><img src="/resources/image/product/btn_movie.png" alt="참고영상 보기 버튼"></a> -->
                </div>
            </div>
            <section class="tabSection1"><img src="/resources/image/product/proN_6_size0_1.jpg" alt=""></section>
            <section class="tabSection2"><img src="/resources/image/product/proN_6_size0_2.jpg" alt=""></section>
        </div>
    </div>
</article>
<!-- end article 1 -->
<article id = "sortType2">
    <!--반복영역-->
    <section id="pro_list1" class="product_con">
        <h1>Line Up</h1>
        <h2>
            <a href="#none">Interactive Theater System</a>
        </h2>
        <div class="product_list">
            <ul class="clearfix"></ul>
        </div>
    </section>
    <!--반복영역-->
    <section class="related_sec">
        <h1>Related Project</h1>
        <span class="morebtn" style="display:none;">
        	<a href="#" title="자세히 보기">more →</a>
        </span>
        <div class="related_list clearfix"></div>
    </section>
    <section class="product_con lineup_con">
        <h1>Interactive Theater System</h1>
        <div class="lineup_list lineup00">
            <ul class="clearfix"></ul>
        </div>
    </section>
    <section class="product_con lineup_con">
        <h1>Translook</h1>
        <div class="lineup_list lineup01">
            <ul class="clearfix"></ul>
        </div>
    </section>
    <section class="product_con lineup_con">
        <h1>Digital Signage</h1>
        <div class="lineup_list lineup02">
            <ul class="clearfix"></ul>
        </div>
    </section>
    <section class="product_con lineup_con">
        <h1>Media Table</h1>
        <div class="lineup_list lineup03">
            <ul class="clearfix"></ul>
        </div>
    </section>
    <section class="product_con lineup_con">
        <h1>Media Art</h1>
        <div class="lineup_list lineup04">
            <ul class="clearfix"></ul>
        </div>
    </section>
    <section class="product_con lineup_con">
        <h1>Solution</h1>
        <div class="lineup_list lineup05 lastlist">
            <ul class="clearfix"></ul>
        </div>
    </section>
</article>
<div id="sortBottom"></div>
<!-- end article 2 -->
<!--product end-->

